<script setup>
import { ref } from 'vue'
import { loadAdminAdmin, removeAdminAdmin } from '@/api/admin/admin'
import { ElNotification } from 'element-plus'

// 导入 + 注册
import MyTable from './table/MyTable.vue'

let list = ref([])
// 自己二次封装得表格需要得列配置属性
let columns = ref([
  { label: '序号', type: 'index', width: '60' },
  { label: '管理员编号', prop: 'admin_id' },
  { label: '用户名', prop: 'admin_username' },
  { label: '角色', template: 'role' },
  { label: '权限数量', template: 'count' },
  { label: '编辑', template: 'edit' },
])

const initAdminData = async function () {
  list.value = await loadAdminAdmin()
}

const deleteAdmin = async function (row) {
  await removeAdminAdmin(row.admin_id)
  ElNotification.success({
    title: `“${row.admin_username}”删除成功`,
  })
  initAdminData()
}

initAdminData()
</script>

<template>
  <el-card>
    <template #header>管理员账号管理</template>
    <div class="nav-bar">
      <div>
        <el-button size="small" type="success">
          <template #icon>
            <el-icon><EpPlus /></el-icon>
          </template>
          <span>添加</span>
        </el-button>
      </div>
    </div>
    <!-- <el-table border stripe size="small" :data="list">
      <template #empty>
        <el-empty description="暂无数据" />
      </template>
      <el-table-column label="序号" type="index" width="60"></el-table-column>
      <el-table-column label="管理员编号" prop="admin_id"></el-table-column>
      <el-table-column label="用户名" prop="admin_username"></el-table-column>
      <el-table-column label="角色" #default="{ row }">
        <el-tag size="small" effect="dark">{{ row.role_name }}</el-tag>
      </el-table-column>
      <el-table-column label="权限数量" prop="rights_count" #default="{ row }">
        <el-tag type="danger" size="small" effect="dark">{{ row.rights_count }}</el-tag>
      </el-table-column>
      <el-table-column label="操作" width="120" #default="{ row }">
        <el-button type="primary" link>编辑</el-button>
        <el-popconfirm
          :title="`是否删除管理员“${row.admin_username}”？`"
          @confirm="deleteAdmin(row)"
        >
          <template #reference>
            <el-button type="danger" link>删除</el-button>
          </template>
        </el-popconfirm>
      </el-table-column>
    </el-table> -->
    <MyTable border stripe size="small" :data="list" :columns="columns">
      <template #role="{ row }">
        <el-tag size="small" effect="dark">{{ row.role_name }}</el-tag>
      </template>

      <template #count="{ row }">
        <el-tag type="danger" size="small" effect="dark">{{ row.rights_count }}</el-tag>
      </template>

      <template #edit="{ row }">
        <el-button type="primary" link>编辑</el-button>
        <el-popconfirm
          :title="`是否删除管理员“${row.admin_username}”？`"
          @confirm="deleteAdmin(row)"
        >
          <template #reference>
            <el-button type="danger" link>删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </MyTable>
  </el-card>
</template>

<style scoped>
.nav-bar {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin-bottom: 14px;
}
</style>
